<html>
    <head>
        <meta charset="utf-8">
        <title>Tetris by Team Coconut</title>
        <link href="css/coconut/jquery-ui-1.10.3.custom.css" rel="stylesheet">
        <link href="css/maincss.css" type="text/css" rel="stylesheet">
        <script src="js/jquery-1.9.1.js"></script>
        <script src="js/jquery-ui-1.10.3.custom.js"></script>

    </head>
    <body>
        <div id="mainbody" class="ui-widget-content ui-corner-all" align="center">
            <div class="gamename">
                <img src="img/text.png" alt="TETRIS"> 
            </div>
            <button class="button-width" id="start">START</button>
            <button class="button-width" id="options">OPTIONS</button>
            <button class="button-width" id="score">HIGHSCORE</button>
            <div class="logo">
                <img src="img/logo.png" alt="Team Coconut">
            </div>                 
        </div>
        <script>
             //declare theme of the button
            $(function() {
                $(".button-width").button();
            });
            //navigation - load subfiles inside the main div
            $(document).ready(function() {
                $(".button-width").click(function() {
                    if ($(this).is('#start')) {
                        $("#mainbody").hide().load("game.html", function(response, status, xhr) {
                            if (status === "error") {
                                // handle error 
                            }
                            else
                            {
                                $(this).fadeIn();
                            }
                        });
                    }
                    else if ($(this).is('#options')) {
                        $("#mainbody").hide().load('options.html', function(response, status, xhr) {
                            if (status === "error") {
                                // handle error 
                            }
                            else
                            {
                                $(this).fadeIn();
                            }
                        });

                    }
                    else if ($(this).is('#score')) {
                        $("#mainbody").hide().load('score.html', function(response, status, xhr) {
                            if (status === "error") {
                                // handle error 
                            }
                            else
                            {
                                $(this).fadeIn();
                            }
                        });
                    }
                });
            });
        </script>
    </body>
</html>
